<template>
  <div>
    <Breadcrumb :style="{margin: '24px 0'}">
      <BreadcrumbItem>知识管理</BreadcrumbItem>
      <BreadcrumbItem>
        <router-link to="/index/knowledgeBox">知识体系库</router-link>
      </BreadcrumbItem>
    </Breadcrumb>
    <Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
      <div class="demo-split">
        <Split v-model="split">
          <div slot="left" class="demo-split-pane">
            <Card
                id     = "knowledgeType"
                title  = "类目"
                icon   = "ios-options"
              :padding = "0"
              shadow
              style = "width: 300px;"
            >
              <!-- 类目管理 -->
              <Button id="typeManage" style="color:#2d8cf0;" type="text" size="small" @click="typeMange = true">类目管理</Button>
              <Modal v-model="typeMange" title="类目管理" width="300">
                <div style="position:relative;">
                  <Button type="text" size="small" id="addButton" @click="addType">新增类目</Button>

                  <div v-for="(item, index) in knowledgeType" :key="index">
                    <div style="display:inline-block;height:25px;width:60%;">{{item.typeName}}</div>
                    <div style="display:inline-block;height:25px;width:40%;">
                      <Button
                        type = "info"
                        size = "small"
                        ghost
                        @click = "editModal = true;editType(item.id)"
                      >修改</Button>

                      <Poptip confirm title="确定删除这条类目吗?" @on-ok="deleteType(item.id)">
                        <Button type="error" size="small" ghost>删除</Button>
                      </Poptip>
                    </div>
                  </div>
                </div>
              </Modal>

              <CellGroup
                  @on-click = "changeLayout(item.id)"
                  v-for     = "(item, index) in knowledgeType"
                :key        = "index"
              >
                <Cell :name="item.id" :title="item.typeName"/>
              </CellGroup>
            </Card>
          </div>
          <div slot="right" class="demo-split-pane">
            <div class="searchBox">
              <div style="float:left; width:54%;">
                <Input
                  class = "search"
                  search
                  enter-button
                  v-model     = "inputValue"
                  @on-search  = "searchInfo"
                  placeholder = "输入知识id或关键词搜索"
                />
              </div>
              <div style="float:left; width:13%;">
                <!-- 上传文件 -->
                <Button v-if="uesrInfo.type == 3" @click="uploadJudge" icon="ios-cloud-upload">上传文件</Button>
                <Upload
                    v-else-if       = "uesrInfo.type != 3"
                    action          = "/mtz/excel/upload"
                  :headers          = "headers"
                  :with-credentials = "true"
                  :show-upload-list = "false"
                  :on-success       = "uploadSuccess"
                  :on-error         = "uploadError"
                >
                  <!-- :data              = "uploadData" -->
                  <Button icon="ios-cloud-upload">上传文件</Button>
                </Upload>
              </div>
              <div style="float:left; width:13%;" :class="{'exportDisplay':exportDisplay}">
                <!-- 导出文件 -->
                <Button
                  v-if   = "uesrInfo.type == 3"
                  @click = "downloadJudge"
                  icon   = "ios-cloud-download"
                >导出文件</Button>
                <a v-else-if="uesrInfo.type != 3" href="https://sywd11dom.cn/mtz/excel/download">
                  <Button icon="ios-cloud-download">导出文件</Button>
                </a>
              </div>
              <div style="float:left; width:20%;">
                <!-- 新增知识 -->
                <Button type="info" shape="circle" @click="addJudge">新增知识</Button>
                <Modal v-model="addKonwledge" title="新增知识" width="600" @on-ok="confirmAdd">
                  <Form :model="newKnowledge" label-position="right" :label-width="100">
                    <FormItem label="知识类型">
                      <Select v-model="newKnowledge.knowledgeType" style="width:200px">
                        <Option
                            v-for = "item in knowledgeType"
                          :value  = "item.id"
                          :key    = "item.id"
                        >{{ item.typeName }}</Option>
                      </Select>
                    </FormItem>
                    <FormItem label="知识标题">
                      <Input v-model="newKnowledge.question"/>
                    </FormItem>
                    <FormItem label="核心词">
                      <Input v-model="newKnowledge.keyword"/>
                    </FormItem>
                    <FormItem label="答案">
                      <Input v-model="newKnowledge.answer" type="textarea" :rows="3"/>
                    </FormItem>
                    <FormItem label="修改人">{{uesrInfo.username}}</FormItem>
                    <FormItem label="视角">
                      <Input v-model="newKnowledge.angle"/>
                    </FormItem>
                  </Form>
                </Modal>
              </div>
            </div>
            <div class="messageTitle message">
              <div style="width:10%;">知识id</div>
              <div style="width:22%;">知识标题</div>
              <div style="width:11%;">核心词</div>
              <div style="width:8%;">状态</div>
              <div style="width:11%;">修改人</div>
              <div style="width:17%;">编辑时间</div>
              <div style="width:21%;">操作</div>
            </div>
            <!-- 问题 -->
            <div>
              <div class="message" v-for="(item,index) in showList" :key="index">
                <div style="width:10%;">{{item.id}}</div>
                <div style="width:22%;text-align:left;">{{item.question}}</div>
                <div style="width:11%;">{{item.keyword}}</div>
                <div style="width:8%; color:green;" v-if="item.isDeleted=='已发布'">{{item.isDeleted}}</div>
                <div
                  style     = "width:8%; color:gray;"
                  v-else-if = "item.isDeleted=='已失效'"
                >{{item.isDeleted}}</div>
                <div style="width:11%;">{{item.author}}</div>
                <div style="width:17%;">{{item.updateTime}}</div>
                <div style="width:21%;">
                  <Button
                    v-if   = "uesrInfo.type == 3"
                    @click = "editJudge"
                    type   = "info"
                    size   = "small"
                    ghost
                  >编辑</Button>
                  <Button
                      v-else-if = "uesrInfo.type != 3"
                    :to         = "`/index/questionEdit/${item.id}`"
                      type      = "info"
                      size      = "small"
                    ghost
                  >编辑</Button>
                  <Button
                    :to    = "`/index/questionHistory/${item.id}`"
                      type = "success"
                      size = "small"
                    ghost
                  >历史</Button>
                  <Button
                    type = "warning"
                    size = "small"
                    ghost
                    v-if   = "item.isDeleted=='已发布'"
                    @click = "takeInvalid(item.id)"
                  >失效</Button>
                  <Button
                    type = "warning"
                    size = "small"
                    ghost
                    v-else-if = "item.isDeleted=='已失效'"
                    @click    = "publishKnowlwdge(item.id)"
                  >发布</Button>
                  <Button type="error" size="small" ghost @click="deleteJudge(item.id)">删除</Button>
                  <!-- 删除对话框 -->
                  <Modal v-model="dele" width="360">
                    <p slot="header" style="color:#f60;text-align:center">
                      <Icon type="ios-information-circle"></Icon>
                      <span>删除确认</span>
                    </p>
                    <div style="text-align:center">
                      <p>删除操作不可恢复,确定删除吗?</p>
                    </div>
                    <div slot="footer">
                      <Button
                        type = "error"
                        size = "large"
                        long
                        :loading = "modal_loading"
                          @click = "del"
                      >删除</Button>
                    </div>
                  </Modal>
                </div>
              </div>
              <Page :total="dataCount" :page-size="pageSize" show-total @on-change="changePage1"/>
            </div>
          </div>
        </Split>
      </div>
    </Content>
    <!-- <router-view></router-view> -->
  </div>
</template>
<script>
import axios from "axios";
import qs from "qs";
import { myGet, myPost } from "../utils/request.js";
import { url } from "../utils/api.js";
import { timeFormat } from "../utils/changeTime.js";
import { stateFormat } from "../utils/changeState.js";

export default {
  data() {
    return {
      uesrInfo: {
        username: localStorage.getItem("user_name"),
        type    : localStorage.getItem("user_type")
      },
      // uploadData: {
      //   author: "admin"
      // },
      headers  : { token: localStorage.getItem("token") },
      typeMange: false,                                      //类目管理对话框

      currentTypeID: 0,   //记录当前选择类目id

      knowledgeType: [],      //知识类目
      editModal    : false,   //修改类目对话框
      addTypeName  : "",
      editTypeName : "",

      exportDisplay: false,

      newKnowledge: {},      //新增知识对象
      addKonwledge: false,   //新增知识对话框

      deleteID: 0,

      edit         : false,   //编辑对话框
      dele         : false,   //删除对话框
      modal_loading: false,

      inputValue: "",

      totalList: [],
      showList : [],
      dataCount: 0,
      pageSize : 10,

      layout: "layoutKnowlwdgeAll",

      split: 0.15  //面板分割
    };
  },

  methods: {
    //文件导出权限判断
    downloadJudge() {
      this.$Message.error("您没有权限!");
    },
    //文件上传权限判断
    uploadJudge() {
      this.$Message.error("您没有权限!");
    },
    //新增权限判断
    addJudge() {
      if (this.uesrInfo.type == 3) {
        this.$Message.error("您没有权限!");
      } else {
        this.addKonwledge = true;
      }
    },
    //修改无权限提示
    editJudge() {
      this.$Message.error("您没有权限!");
    },
    // 删除权限判断
    deleteJudge(id) {
      if (this.uesrInfo.type == 1) {
        this.dele = true;
        this.modalDele(id);
      } else {
        this.$Message.error("您没有权限!");
      }
    },
    // 删除类目
    deleteType(id) {
      var that   = this;
      let url    = that.Api.url.DeleteKnowledgeType;
      let params = {
        id: id
      };
      that.http.post(url, params).then(res => {
        that.$Message.success("删除类目成功!");
        that.initKnowledge();
      });
    },
    //修改类目
    editType(id) {
      var that = this;
      this.$Modal.confirm({
        render: h => {
          return h("Input", {
            props: {
              autofocus  : true,
              placeholder: "请输入修改类目名..."
            },
            on: {
              input: val => {
                that.editTypeName = val;
              }
            }
          });
        },
        onOk() {
          if (that.editTypeName == "") {
            that.$Message.error("修改类目名不能为空!");
            return;
          }
          let url    = that.Api.url.EditKnowledgeType;
          let params = {
            id      : id,
            typeName: that.editTypeName
          };
          that.http.post(url, params).then(res => {
            that.$Message.success("修改类目成功!");
            that.editTypeName = "";
            that.initKnowledge();
          });
        }
      });
    },
    //新增类目
    addType() {
      var that = this;
      this.$Modal.confirm({
        render: h => {
          return h("Input", {
            props: {
              autofocus  : true,
              placeholder: "请输入新增类目名..."
            },
            on: {
              input: val => {
                this.addTypeName = val;
              }
            }
          });
        },
        onOk() {
          if (that.addTypeName == "") {
            that.$Message.error("新增类目名不能为空!");
            return;
          }
          let url    = that.Api.url.AddKnowledgeType;
          let params = {
            typeName: that.addTypeName
          };
          that.http.post(url, params).then(res => {
            that.$Message.success("新增类目成功!");
            that.addTypeName = "";
            that.initKnowledge();
          });
        }
      });
    },
    // 文件上传失败
    uploadError() {
      this.$Message.error("上传失败");
    },
    //文件上传成功
    uploadSuccess() {
      this.$Message.success("上传成功");
    },
    //确认增加知识
    confirmAdd() {
      var that = this;
      console.log(this.newKnowledge);
      var   newKnowledge        = this.newKnowledge;
      const url                 = this.Api.url.addQuestion;
            newKnowledge.author = that.uesrInfo.username;

      let params = {
        knowledgeType: newKnowledge.knowledgeType,
        question     : newKnowledge.question,
        keyword      : newKnowledge.keyword,
        answer       : newKnowledge.answer,
        author       : newKnowledge.author,
        angle        : newKnowledge.angle
      };
      that.http.post(url, params).then(res => {
        that.$Message.success("添加成功!");
      });
    },
    // 改变类目
    changeLayout(e) {
      var that        = this;
          this.layout = e;
      console.log("layout", e);
      that.currentTypeID = e;
      console.log("currentTypeID", e);
      let url;
      let params;
      this.exportDisplay = true;
      url                = this.Api.url.KnowledgeTypeQusetion;
      params             = {
        knowledgeType: e
      };
      that.http
        .get(url, {
          params: params
        })
        .then(res => {
          that.loadingPage(res);
        });
    },
    // 失效
    takeInvalid(id) {
      var that   = this;
      let url    = this.Api.url.invalidQuestion;
      let params = {
        id: id
      };
      that.http.post(url, params).then(res => {
        that.$Message.success("请求成功!");
        that.init();
      });
    },
    // 发布问题
    publishKnowlwdge(id) {
      var that   = this;
      let url    = that.Api.url.publishQuestion;
      let params = {
        id: id
      };
      console.log("params", params);
      that.http.post(url, params).then(res => {
        that.$Message.success("发布成功!");
        that.init();
      });
    },
    //删除
    modalDele(e) {
      this.deleteID = e;
      console.log("deleteID", e);
    },
    // 确认删除知识
    del() {
      var that               = this;
          this.modal_loading = true;
      let url                = this.Api.url.deleQuestion;
      let params             = {
        id: that.deleteID
      };
      that.http.post(url, params).then(res => {
        that.modal_loading = false;
        that.dele          = false;
        that.$Message.success("删除成功!");
        that.init();
      });
    },
    // 搜索知识id或关键字
    searchInfo(e) {
      var that = this;
      var reg  = /^[0-9]+$/;
      //输入纯数字
      if (reg.test(e)) {
        // 通过id查询问答
        let url    = that.Api.url.findIDQuestion;
        let params = {
          questionId: e
        };
        that.http
          .get(url, {
            params: params
          })
          .then(res => {
            console.log("findIDQuestion", res);
            that.loadingPage(res);
          });
      } else {
        // 通过关键词查询问答
        let url    = this.Api.url.findKeyQuestion;
        let params = {
          keyword: e
        };
        that.http
          .get(url, {
            params: params
          })
          .then(res => {
            console.log("findKeyQuestion", res);
            that.loadingPage(res);
          });
      }

      this.inputValue = "";
    },
    //页数变化的时候改变每一页的内容
    changePage1(index) {
      console.log("页数变化", index);
      var _start        = (index - 1) * this.pageSize;
      var _end          = index * this.pageSize;
          this.showList = this.totalList.slice(_start, _end);
    },
    //分页加载和时间格式转换
    loadingPage(res) {
      var that = this;
      // console.log("分页加载res", res);
      //成功,页面打开就首先获取全部数据和第一页显示的数据
      that.totalList = res;
      this.dataCount = res.length;        //所有数据条数
      res            = timeFormat(res);   //时间格式转换
      res            = stateFormat(res);  //状态转换

      for (var i = 0; i < res.length; i++) {
        //只显示“已失效”和“已发布”
        if (res[i].isDeleted == "未审核" || res[i].isDeleted == "已删除") {
          that.dataCount--;
          that.totalList.splice(i, 1);
          i--;
        }
      }
      if (that.dataCount < that.pageSize) {
        that.showList = that.totalList;
      } else {
        that.showList = that.totalList.slice(0, that.pageSize);
      }
    },
    init() {
      let that = this;
      if (that.currentTypeID == 0) {
        var url    = that.Api.url.allQuestion;
        var params = {};
      } else {
        var url    = that.Api.url.KnowledgeTypeQusetion;
        var params = {
          knowledgeType: that.currentTypeID
        };
      }
      that.http
        .get(url, {
          params: params
        })
        .then(res => {
          that.loadingPage(res);
        });
    },
    initKnowledge() {
      // 初始化类目
      let that = this;
      let url  = that.Api.url.allKnowledgeType;
      that.http.get(url).then(res => {
        that.knowledgeType = res;
      });
    }
  },

  computed: {},
  mounted() {
    let that = this;
    that.init();
    that.initKnowledge();
  }
};
</script>
<style>
#addButton {
  position: relative;
  top     : -6px;
  left    : -10px;
  color   : #2d8cf0;
}
#typeManage {
  position: absolute;
  left    : 70px;
  top     : 13px;
  color   : gray;
}

#knowledgeType {
  position: relative;
}

.colorInvalid {
  color: #515a6e;
}
.colorValid {
  color: green;
}
.exportDisplay {
  display: none;
}

a:link {
  color: #515a6e;
}
a:hover {
  color: #2d8cf0;
}
a:visited {
  color: #515a6e;
}
.ivu-upload {
  display: inline-block;
}

.ivu-card {
  width: 100% !important;
}

.demo-split {
  height: 610px !important;
  border: 0 !important;
}

.ivu-layout-content {
  position  : relative;
  min-height: 640px !important;
}

.searchBox {
  height: 60px;
}

.ivu-input-group {
  width      : 60% !important;
  margin-left: 30%;
}

/* .ivu-input-search {
  background  : rgba(81, 90, 110, 0.6) !important;
  border-color: rgba(81, 90, 110, 0.6) !important;
} */

.messageTitle {
  background-color: rgba(81, 90, 110, 0.15);
  text-align      : center;
  font-weight     : bold;
  font-size       : 14px;
}

.message div {
  text-align    : center;
  display       : inline-block;
  height        : 40px;
  line-height   : 40px;
  vertical-align: bottom;
  overflow      : hidden;
  text-overflow : ellipsis;
  white-space   : nowrap;
}

.ivu-btn {
  margin-left : 3px;
  margin-right: 3px;
}

.ivu-page {
  text-align: center;
  position  : absolute;
  bottom    : 25px;
  left      : 0;
  right     : 0;
}
</style>


